<template>
<div style="background:rgb(242,242,242);margin-left:-1%;padding-bottom:1%">
    <!--保单信息 -->
    <div class="baseInfo">
        <el-row>
            <el-col :span="21">
                <div class="grid-content bg-purple table_header" style="font-weight='600'">保单信息</div>
            </el-col>
            <el-col :span="3" style="cusor:pointer">
                <div class="grid-content bg-purple table_header" style="position:releative">
                    <el-button type="primary" plain @click="submitRegist" style="position:absolute;bottom:10px">提交</el-button>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="3">
                <div class="grid-content bg-purple text-right">保单号:</div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    <el-input disabled="disabled" v-model="registData.mainVo.policyNo"></el-input>
                </div>
            </el-col>
            <el-col :span="1">
                <div class="grid-content bg-purple">
                    <el-button type="primary" class="btnNarrow">保单详情</el-button>
                </div>
            </el-col>
            <el-col :span="1">
                <div class="grid-content bg-purple">
                    <el-button type="primary" class="btnNarrow" style="margin-left:-5px">历史报案</el-button>
                </div>
            </el-col>
            <el-col :span="2">
                <div class="grid-content bg-purple text-right">险种:</div>
            </el-col>
            <el-col :span="5">
                <div class="grid-content bg-purple">
                    <el-input disabled="disabled" v-model="registData.mainVo.riskCode"></el-input>
                </div>
            </el-col>
            <el-col :span="3">
                <div class="grid-content bg-purple text-right">投保人:</div>
            </el-col>
            <el-col :span="5">
                <div class="grid-content bg-purple">
                    <el-input disabled="disabled" v-model="registData.mainVo.appliName"></el-input>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="3">
                <div class="grid-content bg-purple text-right">保险起期:</div>
            </el-col>
            <el-col :span="5">
                <el-date-picker disabled="disabled" v-model="registData.mainVo.startDate" type="date" class="width100" placeholder="保险起期"></el-date-picker>
            </el-col>
            <el-col :span="3">
                <div class="grid-content bg-purple text-right">签单日期:</div>
            </el-col>
            <el-col :span="5">
                <el-date-picker disabled="disabled" v-model="registData.mainVo.operateDate" type="date" class="width100" placeholder="签单日期"></el-date-picker>
            </el-col>
            <el-col :span="3">
                <div class="grid-content bg-purple text-right">承包机构:</div>
            </el-col>
            <el-col :span="5">
                <div class="grid-content bg-purple">
                    <el-input disabled="disabled" v-model="registData.mainVo.comCode"></el-input>
                </div>
            </el-col>
        </el-row>
    </div>
    <!--出险信息 -->
    <div class="baseInfo">
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple table_header" style="font-weight='600'">出险信息</div>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="3">
                <div class="grid-content bg-purple text-right">出险时间 :</div>
            </el-col>
            <el-col :span="5">
                <el-date-picker v-model="registData.registDemageVo.damageTime" type="date" class="width100" placeholder="出险时间"></el-date-picker>
            </el-col>
            <el-col :span="3">
                <div class="grid-content bg-purple text-right">出险地点 :</div>
            </el-col>
            <el-col :span="2">
                <div class="grid-content bg-purple">
                    <el-select v-model="registData.registDemageVo.nationFlag" placeholder="请选择" style="width: 80px;">
                        <el-option v-for="item in nationFlag" :key="item.value" :label="item.code +' ' + item.value" :value="item.code"></el-option>
                    </el-select>
                </div>
            </el-col>
            <el-col :span="3">
                <div class="grid-content bg-purple">
                    <el-cascader v-model="registData.registDemageVo.damageAreaCode" :options="options" style="width:130px"></el-cascader>
                </div>
            </el-col>
            <el-col :span="3">
                <div class="grid-content bg-purple text-right">详细地址 :</div>
            </el-col>
            <el-col :span="5">
                <el-input v-model="registData.registDemageVo.damageAddress"></el-input>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="3">
                <div class="grid-content bg-purple text-right">出险原因 :</div>
            </el-col>
            <el-col :span="5">
                <el-input v-model="registData.registDemageVo.operateDate"></el-input>
            </el-col>
            <el-col :span="3">
                <div class="grid-content bg-purple text-right">出险人 :</div>
            </el-col>
            <el-col :span="3">
                <div class="grid-content bg-purple">
                    <el-input v-model="registData.registDemageVo.demageName"></el-input>
                </div>
            </el-col>
            <el-col :span="1">
                <div class="grid-content bg-purple">
                    <el-button type="primary" style="padding: 8px 5px;" class="btnNarrow">更正</el-button>
                </div>
            </el-col>
            <el-col :span="1">
                <div class="grid-content bg-purple">
                    <el-button type="primary" class="btnNarrow" style="margin-left:-12px">历史报案</el-button>
                </div>
            </el-col>
            <el-col :span="3">
                <div class="grid-content bg-purple text-right">出险人证件类型 :</div>
            </el-col>
            <el-col :span="5">
                <el-select v-model="registData.registDemageVo.certifyTypeName" placeholder="请选择" style="width: 225px;">
                    <el-option v-for="item in insuredIdentifyType" :key="item.value" :label="item.code +' ' + item.value" :value="item.code"></el-option>
                </el-select>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="3">
                <div class="grid-content bg-purple text-right">出险人证件号码 :</div>
            </el-col>
            <el-col :span="5">
                <div class="grid-content bg-purple">
                    <el-input v-model="registData.registDemageVo.certifyNo"></el-input>
                </div>
            </el-col>
            <el-col :span="3">
                <div class="grid-content bg-purple text-right">出险人电话 :</div>
            </el-col>
            <el-col :span="5">
                <div class="grid-content bg-purple">
                    <el-input v-model="registData.registDemageVo.demagePhone"></el-input>
                </div>
            </el-col>
            <el-col :span="3">
                <div class="grid-content bg-purple text-right">报损金额 :</div>
            </el-col>
            <el-col :span="5">
                <el-input v-model="registData.registDemageVo.reportedLoss"></el-input>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="3">
                <div class="grid-content bg-purple text-right">就诊医院 :</div>
            </el-col>
            <el-col :span="5">
                <div class="grid-content bg-purple">
                    <el-input v-model="registData.registDemageVo.hospitalName"></el-input>
                </div>
            </el-col>
            <el-col :span="3">
                <div class="grid-content bg-purple text-right">伤亡情况 :</div>
            </el-col>
            <el-col :span="3">
                <div class="grid-content bg-purple" style="position:relative">
                    <el-input v-model="registData.registDemageVo.isDead"></el-input>
                    <span style="position:absolute;top:0;right:15px">伤</span>
                </div>
            </el-col>
            <el-col :span="2">
                <div class="grid-content bg-purple" style="position:relative">
                    <el-input v-model="registData.registDemageVo.isDead"></el-input>
                    <span style="position:absolute;top:0;right:15px">死</span>
                </div>
            </el-col>
            <el-col :span="3">
                <div class="grid-content bg-purple text-right">是否重大理赔:</div>
            </el-col>
            <el-col :span="5">
                <div class="grid-content bg-purple">
                    <el-radio v-model="registData.registDemageVo.disasterCode" label="1">是</el-radio>
                    <el-radio v-model="registData.registDemageVo.disasterCode" label="0">否</el-radio>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="3">
                <div class="grid-content bg-purple text-right">是否巨灾:</div>
            </el-col>
            <el-col :span="5">
                <div class="grid-content bg-purple">
                    <el-radio v-model="registData.registDemageVo.disasterCode" label="1">是</el-radio>
                    <el-radio v-model="registData.registDemageVo.disasterCode" label="0">否</el-radio>
                </div>
            </el-col>
            <el-col :span="3">
                <div class="grid-content bg-purple text-right">是否双代:</div>
            </el-col>
            <el-col :span="5">
                <div class="grid-content bg-purple">
                    <el-radio v-model="registData.registDemageVo.isDouble" label="1">是</el-radio>
                    <el-radio v-model="registData.registDemageVo.isDouble" label="0">否</el-radio>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="3">
                <div class="grid-content bg-purple text-right">出险经过说明 :</div>
            </el-col>
            <el-col :span="18">
                <div class="grid-content bg-purple">
                    <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="registData.registDemageVo.damageRemark"></el-input>
                </div>
            </el-col>
            <el-col :span="3">
                <div class="grid-content bg-purple">
                    <el-button type="primary">生成出险经过</el-button>
                </div>
            </el-col>
        </el-row>
    </div>
    <!--报案信息 -->
    <div class="baseInfo">
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple table_header" style="font-weight='600'">报案信息</div>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="3">
                <div class="grid-content bg-purple text-right">报案号 :</div>
            </el-col>
            <el-col :span="5">
                <el-input v-model="registData.registVo.registNo"></el-input>
            </el-col>
            <el-col :span="3">
                <div class="grid-content bg-purple text-right">报案时间 :</div>
            </el-col>
            <el-col :span="5">
                <div class="grid-content bg-purple">
                    <el-input v-model="registData.registVo.reportTime"></el-input>
                </div>
            </el-col>
            <el-col :span="3">
                <div class="grid-content bg-purple text-right">初登坐席工号 :</div>
            </el-col>
            <el-col :span="5">
                <div class="grid-content bg-purple">
                    <el-input v-model="registData.registVo.reportTime"></el-input>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="3">
                <div class="grid-content bg-purple text-right">初登坐席姓名 :</div>
            </el-col>
            <el-col :span="5">
                <el-input v-model="registData.registVo.reportorName"></el-input>
            </el-col>
            <el-col :span="3">
                <div class="grid-content bg-purple text-right">报案人 :</div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    <el-input v-model="registData.registVo.reportorName"></el-input>
                </div>
            </el-col>
            <el-col :span="1">
                <div class="grid-content bg-purple">
                    <el-button type="primary" class="btnNarrow" @click="sameDemageName">同出险人</el-button>
                </div>
            </el-col>
            <el-col :span="3">
                <div class="grid-content bg-purple text-right">报案人电话 :</div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    <el-input v-model="registData.registVo.reportorPhone"></el-input>
                </div>
            </el-col>
            <el-col :span="1">
                <div class="grid-content bg-purple">
                    <el-button type="primary" class="btnNarrow" @click="sameDemageName">同出险人</el-button>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="3">
                <div class="grid-content bg-purple text-right">报案人和被保险人关系 :</div>
            </el-col>
            <el-col :span="5">
                <el-select v-model="registData.registVo.reportorRelation" placeholder="请选择" style="width: 225px;">
                    <el-option v-for="item in reportorRelation" :key="item.value" :label="item.code +' ' + item.value" :value="item.code"></el-option>
                </el-select>
            </el-col>
            <el-col :span="3">
                <div class="grid-content bg-purple text-right">案件紧急程度 :</div>
            </el-col>
            <el-col :span="5">
                <el-select v-model="registData.registVo.mercyFlag" placeholder="请选择" style="width: 225px;">
                    <el-option v-for="item in mercyFlag" :key="item.value" :label="item.code +' ' + item.value" :value="item.code"></el-option>
                </el-select>
            </el-col>
            <el-col :span="3">
                <div class="grid-content bg-purple text-right">补报案类型 :</div>
            </el-col>
            <el-col :span="5">
                <el-select v-model="registData.registVo.addReportRemark" placeholder="请选择" style="width: 225px;">
                    <el-option v-for="item in addReportRemark" :key="item.value" :label="item.code +' ' + item.value" :value="item.code"></el-option>
                </el-select>
            </el-col>
        </el-row>
    </div>
    <!--处理情况 -->
    <div class="baseInfo">
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple table_header" style="font-weight='600'">处理情况</div>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="3">
                <div class="grid-content bg-purple text-right">案件处理情况 :</div>
            </el-col>
            <el-col :span="21">
                <div class="grid-content bg-purple">
                    <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="registData.registFactVo.content"></el-input>
                </div>
            </el-col>
        </el-row>
    </div>
</div>
</template>

<script>
import {
    mapActions
} from "vuex";
import {
    insuredIdentifyType,
    mercyFlag,
    reportorRelation,
    addReportRemark,
    nationFlag
} from "../../libs/data";
export default {
    data() {
        return {
            initRegistCondition: {
                registNo: "", //报案号
                policyNo: this.$route.query.policyNo, //保单号
                taskId: "", //任务ID
                isTempPolicy: "", //是否为临时报案（1：是；0：不是）
                userCode: this.$store.state.app.loginData.userCode, //用户代码
                makeCom: this.$store.state.app.loginData.makeCom, //操作机构
                tmpPolicyNo: "", //临时保单号
                damageDate: this.$route.query.damageDate, //出险日期
                traceMainId: "",
            },
            // 报案单数据
            registData: {},
            insuredIdentifyType: insuredIdentifyType,
            mercyFlag: mercyFlag,
            reportorRelation: reportorRelation,
            addReportRemark: addReportRemark,
            nationFlag: nationFlag,
            radio: "1",
            options: [{
                value: "hebei",
                label: "河北",
                children: [{
                        value: "shijiazhuang",
                        label: "石家庄",
                        children: [{
                                value: "yuhua",
                                label: "裕华区",
                            },
                            {
                                value: "xicheng",
                                label: "西城区",
                            },
                        ],
                    },
                    {
                        value: "handan",
                        label: "邯郸市",
                        children: [{
                            value: "congtai",
                            label: "丛台区",
                        }, ],
                    },
                ],
            }, ],
        };
    },
    components: {
        insuredIdentifyType,
        mercyFlag,
        reportorRelation,
        addReportRemark
    },
    computed: {},
    watch: {},
    methods: {
        ...mapActions("registReport", ["initRegist"]),
        // 初始化报案
        initRegistPolicy() {
            this.initRegist(this.initRegistCondition).then((result) => {
                console.log(result.data);
                this.pageAssignment(result.data);
            });
        },
        // 初始化报案之后，页面赋值
        pageAssignment(data) {
            this.registData = data;
        },
        // 同出险人方法
        sameDemageName() {
            this.registData.registVo.reportorName = this.registData.registDemageVo.reportorName;
            this.registData.registVo.demagePhone = this.registData.registDemageVo.demagePhone;
        },
        submitRegist() {
            this.$router.push({
                name: "case",
                params: {
                    num: 1,
                },
            });
        },
    },
    created() {},
    mounted() {
        this.initRegistPolicy();
    },
};
</script>

<style lang="scss" scoped>
//@import url(); 引入公共css类
.btnNarrow {
    padding: 8px 0;
    margin-left: -10px;
}

.damageInfo .el-input--suffix .el-input__inner {
    padding-right: 16px !important;
}
</style>
